<template>
  <div class="container" id="container">
    <section class="cd-horizontal-timeline">
      <div class="timeline">
        <div class="events-wrapper">
          <div class="events">
            <ol>
              <li>
                <a href="#0" data-date="16/01/1884" class="selected">1884</a>
              </li>
              <li><a href="#0" data-date="03/03/1888">1888</a></li>
              <li>
                <!-- 电影的诞生和早期发展 -->
                <a href="#0" data-date="03/03/1891" style="color: red">1891</a>
              </li>
              <li><a href="#0" data-date="28/02/1896">1896</a></li>
              <li><a href="#0" data-date="20/04/1902">1902</a></li>
              <li><a href="#0" data-date="20/05/1907">1907</a></li>
              <li>
                <!-- 无声电影阶段 -->
                <a href="#0" data-date="09/07/1910" style="color: red">1910</a>
              </li>
              <li><a href="#0" data-date="30/08/1914">1914</a></li>
              <li><a href="#0" data-date="15/09/1918">1918</a></li>
              <li><a href="#0" data-date="15/09/1922">1922</a></li>
              <li><a href="#0" data-date="15/09/1927">1927</a></li>
              <!-- 有声电影阶段 -->
              <li>
                <a href="#0" data-date="15/09/1935" style="color: red">1935</a>
              </li>
              <li><a href="#0" data-date="01/11/1938">1938</a></li>
              <li><a href="#0" data-date="01/11/1947">1947</a></li>
              <li><a href="#0" data-date="10/12/1952">1952</a></li>
              <li>
                <!-- style="color: red" -->
                <a href="#0" data-date="10/12/1957" style="color: red">1957</a>
              </li>
              <li><a href="#0" data-date="19/01/1962">1962</a></li>
              <li><a href="#0" data-date="03/03/1968">1968</a></li>
              <li><a href="#0" data-date="03/03/1974">1974</a></li>
              <li><a href="#0" data-date="03/03/1984">1984</a></li>
              <li><a href="#0" data-date="03/03/1990">1990</a></li>
              <li><a href="#0" data-date="03/03/1994">1994</a></li>
            </ol>
            <span class="filling-line" aria-hidden="true"></span>
          </div>
          <!-- .events -->
        </div>
        <!-- .events-wrapper -->

        <ul class="cd-timeline-navigation">
          <li><a href="#0" class="prev inactive">Prev</a></li>
          <li><a href="#0" class="next">Next</a></li>
        </ul>
        <!-- .cd-timeline-navigation -->
      </div>
      <!-- .timeline -->

      <div class="events-content">
        <ol>
          <li class="selected" data-date="16/01/1884">
            <h2>柯达胶卷</h2>
            <br /><br />
            <p>
              乔治·伊斯曼(美国)把柯达胶卷投放市场,把摄影的成本降低，真正把摄影从一项贵族的游戏推广成为大众都能接触到的事物,摄影从此不再是空中楼阁，遥不可及。推动了整个社会的发展，在过去由于摄影成本昂贵，摄影基本以肖像为主，很少带有信息传播的功能。
            </p>
          </li>

          <li data-date="03/03/1888">
            <h2>胶片乳剂</h2>
            <br /><br />
            <p>伊斯曼为其在一种赛潞瑶片基上使用的胶片乳剂申请了专利</p>
          </li>
          <li data-date="03/03/1891">
            <h2>活动电影放映机</h2>
            <!-- img -->
            <br /><br />
            <p>
              1891年美国发明家“托马斯.爱迪生”经过几年的努力发明了活动电影放映机，这种设备的原理是把胶片切成一英寸宽的带子，首尾相连后在每一格胶片的两边钻四个孔，以便齿轮能将胶片托过摄影机,这一早期的决定影响了整个的电影历史.
            </p>
          </li>

          <li data-date="28/02/1896">
            <h2>叙事电影之父</h2>
            <br /><br />
            <p>
              “叙事电影之父”乔治·梅里爱(法国)开始摄制“幻术”(特技)电影。其后来的电影生涯中，他不断对这一想象的王国进行探索。罗伯特·威廉姆，保罗(英国)在英国为电影放映机(Biosoope)取得专利。
            </p>
          </li>

          <li data-date="20/04/1902">
            <h2>电影工厂兴起</h2>
            <br /><br />
            <p>
              电影创作者表明对于电影叙述方式的基本因素逐渐增长的意识，电影逐渐获得国际性关注，电影工厂兴起.埃德温·S·鲍特的《邮递员的罗曼史》(美国)表明对于电影叙述方式的基本因素逐渐增长的意识。查尔斯·百代(法国)建立起自己的制片厂--百代电影公司。
            </p>
          </li>

          <li data-date="20/05/1907">
            <h2>第一个城市电影审查委员会</h2>
            <br /><br />
            <p>
              在美国，已经发展到近1000家镍币影院。"艺术电影公司"在法国建立。该公司旨在生产具有文化价值的影片。具有文化价值的影片逐渐兴起，并且在芝加哥建立了第一个城市电影审查委员会
            </p>
          </li>

          <li data-date="09/07/1910">
            <h2>无声电影阶段</h2>
            <br /><br />
            <p>
              进入20世纪，随着电影产业的发展，电影的技术设备和拍摄水平也在不断的进步，在摄像机位置、胶片色彩、布景与照明、交叉剪辑等具体专业技术领域都有了优化与提高，这些改善和发展使电影可以承载更多元化的信息量和更具视觉冲击力的画面。
            </p>
          </li>

          <li data-date="30/08/1914">
            <h2>第一座大型影院</h2>
            <br /><br />
            <p>
              故事片开始成为电影工业的标准产品，第一座大型影院“滨河剧院”在美国纽约开业。查尔斯·卓别林在启斯东的影片中出现。第一部故事片长度的喜剧片也出现了
            </p>
          </li>

          <li data-date="15/09/1918">
            <h2>第一部动画故事片</h2>
            <br /><br />
            <p>
              美国的第一部动画故事片，由麦凯执导的《路西塔尼亚的沉没》问世。上海商务印书馆成立"活动影戏部"(后更名为"影片部")，中国开始建立起自己的民族电影事业。
            </p>
          </li>
          <li data-date="15/09/1922">
            <h2>中国第一家影业公司</h2>
            <br /><br />
            <p>
              美国有三分之二的州已经或正在制定有关法规，以对电影进行管理。美国电影工业组成了“美国电影制片和发行人组织”，以改善好莱坞的形象。中国第一家较有规模的影业公司“明星影业公司”在上海成立。它标志著中国民族电影开始进入发展阶段。
            </p>
          </li>
          <li data-date="15/09/1927">
            <h2>奥斯卡奖</h2>
            <br /><br />
            <p>
              美国电影艺术和科学学院第一次推出了"学院奖"(奥斯卡奖)威廉姆·威尔曼拍出了《翼》(美国)。这部描写第一次世界大战壮观的空战场面的影片获得了第一个奥斯卡最佳影片奖，并为其增添了光彩
            </p>
          </li>
          <li data-date="15/09/1935">
            <h2>有声电影阶段</h2>
            <br /><br />
            <p>
              世界电影已经完全进入到了有声电影时代。声音的加入也促使电影拍摄设备也在此期间不断的发展和进步，由最由的单摄像机固定位置拍摄，而发展到多摄像机不同角度拍摄、可移动摄像机技术等
            </p>
          </li>
          <li data-date="01/11/1938">
            <h2>国际电影资料馆联合会成立</h2>
            <br /><br />
            <p>
              国际电影资料馆联合会成立,美国电影处建立
              卡普拉拍摄了《浮生若梦》(美国)。这部奥斯卡最佳影片奖获奖作品赞扬了诚实、善良的品质和个人对于事业与权力的胜利
            </p>
          </li>
          <li data-date="01/11/1947">
            <h2>美国演员养成所建立</h2>
            <br /><br />
            <p>
              美国演员养成所建立。它注重培养演员去发掘内在的真实和自然的表演电视开始了大发展，并给电影工业带来严重的威胁。美国最高法院在“派拉蒙诉讼案”的审理中裁定，电影制片厂对院线的拥有违反了反垄断法，并要求制片厂必须与其院线脱钩。
            </p>
          </li>
          <li data-date="10/12/1952">
            <h2>新的放映系统和宽银幕</h2>
            <br /><br />
            <p>
              电影公司引进了新的放映系统和宽银幕，试图重新夺回观众。美国最高法院裁定，电影媒介有权享受美国宪法第一修正案的保护；这一决定推翻了该法院1915年做出的判决。好莱坞开始转向彩色电影的生产.
            </p>
          </li>
          <li data-date="10/12/1957">
            <h2>3D电影逐渐出现</h2>
            <br /><br />
            <p>
              3D电影已经成为了全世界范围内电影制作者心中无限向往的技术高峰，3D电影技术称之为“电影业70年以来最伟大的创新”。伯格曼拍摄了《野草莓》(瑞典)。影片描述了一位上了年岁的教授寻找过去岁月的旅程。这一旅行使他发现了生命的价值。
            </p>
          </li>
          <li data-date="19/01/1962">
            <h2>间谍片开始复兴</h2>
            <br /><br />
            <p>
              使间谍片开始复兴。影片展示了社会的憎恨与“愤怒的青年”追求个人自由之间的冲突，它在冷酷的工业社会的背景中透视著社会的衰落。布努艾尔拍摄了《毁灭的天使》。影片通过客人发现自己被神秘地囚禁在主人的房子里的故事，隐喻了社会禁捆的崩溃。
            </p>
          </li>
          <li data-date="03/03/1968">
            <h2>影片分级制度</h2>
            <br /><br />
            <p>
              美国电影联合会(MPPA)以影片分级制度取代了以往电影界用以自律的规则。安德森拍摄了《假如……》(英国)。影片反映了年轻一代对传统的反叛。伯格曼拍摄了《羞耻》(瑞典)。影片探索了在一个被战争所撕裂的社会里艺术家的责任和他们所未确定的角色。
            </p>
          </li>
          <li data-date="03/03/1974">
            <h2>"喜剧修正版"的开山之作</h2>
            <br /><br />
            <p>
              梅尔·布鲁克斯拍摄了《燃烧的马鞍》(美国)。这是一部对西部片进行滑稽模仿的影片。它把视觉上的插科打挥、胡闹喜剧和从西部片之外搬来的场景融合在一个荒诞的情节中，成为布鲁克斯后来一系列好莱坞类型片的"喜剧修正版"的开山之作。
            </p>
          </li>
          <li data-date="03/03/1984">
            <h2>大公司生产的影片下降</h2>
            <br /><br />
            <p>
              好莱坞自70年代以来逐年降低产量的趋势在继续。同时，大公司生产的影片已下降到总产量的30％。米洛斯·福尔曼的《莫扎特》获得了7项奥斯卡金像奖。这是一部富有思想内涵的传记片。影片通过宫廷乐师萨列里这个人物表现了天才与庸人、纯洁与邪恶之间的冲突。
            </p>
          </li>
          <li data-date="03/03/1990">
            <h2>松下集团收购环球影片公司</h2>
            <br /><br />
            <p>
              日本松下集团通过买下美国音乐公司(MCA)将其属下的环球影片公司拥为己有。黑泽明拍摄了《八月狂想曲》(日本)。它以衰老、死亡、战争这一流转的主题与人类、自然和日常生活的主题相交织展示出悲抢与美好之间的冲突。
            </p>
          </li>
          <li data-date="03/03/1994">
            <h2>美国电影年</h2>
            <br /><br />
            <p>
              世界第一家通过光缆从发行公司直接向影院传输影像的新型电影放映方式开始在美国投入使用。这一不再依赖电影拷贝的电影放映方式，标志著"多媒体时代电影"的到来；好莱坞继续刷新票房记录，年收入达54亿美元。它使本年度被称为“美国电影年”
            </p>
          </li>
        </ol>
      </div>
      <!-- .events-content -->
    </section>
    <sideBar class="sidebar"></sideBar>
    <div class="btn" id="btnn"></div>
    <div class="btn" id="btnl"></div>
  </div>
</template>

<style lang='less' scoped>
.container {
  background: url("../assets/history.jpg");
  background-position-x: 0vw;
  height: 100%;
  opacity: 2;
}
.sidebar {
  z-index: 10;
  position: absolute;
  left: 0%;
  top: 10%;
}
.btn {
  width: 80px;
  height: 80px;
  z-index: 5;
  background: url("../assets/css/my.svg") no-repeat 0 0;
}
#btnn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(700%, 20%);
}
#btnl {
  // background-position: 0px, 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: rotateY(180deg) translate(800%, 20%);
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

html {
  font-size: 20%;
}

body {
  font-size: 1 rem;
  font-family: "Fira Sans", sans-serif;
  color: #383838;
  background-color: #f8f8f8;
}

a {
  color: #7b9d6f;
  text-decoration: none;
}

/* --------------------------------

Main Components

-------------------------------- */
.cd-horizontal-timeline {
  opacity: 0;
  margin: 0em auto;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.cd-horizontal-timeline::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: "mobile";
  display: none;
}
.cd-horizontal-timeline.loaded {
  /* show the timeline after events position has been set (using JavaScript) */
  opacity: 1;
}
.cd-horizontal-timeline .timeline {
  position: relative;
  height: 100px;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}
.cd-horizontal-timeline .events-wrapper {
  position: relative;
  height: 100%;
  margin: 0 40px;
  overflow: hidden;
}
.cd-horizontal-timeline .events-wrapper::after,
.cd-horizontal-timeline .events-wrapper::before {
  /* these are used to create a shadow effect at the sides of the timeline */
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  width: 30px;
}
.cd-horizontal-timeline .events-wrapper::before {
  left: 0;
  background-image: -webkit-linear-gradient(
    left,
    #f8f8f8,
    rgba(248, 248, 248, 0)
  );
  background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
}
.cd-horizontal-timeline .events-wrapper::after {
  right: 0;
  background-image: -webkit-linear-gradient(
    right,
    #f8f8f8,
    rgba(248, 248, 248, 0)
  );
  background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));
}
.cd-horizontal-timeline .events {
  /* this is the grey line/timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 49px;
  height: 2px;
  /* width will be set using JavaScript */
  background: #dfdfdf;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
}
.cd-horizontal-timeline .filling-line {
  /* this is used to create the green line filling the timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #7b9d6f;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
  position: absolute;
  bottom: 0;
  z-index: 2;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding-bottom: 15px;
  color: #383838;
  /* fix bug on Safari - text flickering while timeline translates */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.cd-horizontal-timeline .events a::after {
  /* this is used to create the event spot */
  content: "";
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -5px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  background-color: #f8f8f8;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  -moz-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
  background-color: #7b9d6f;
  border-color: #7b9d6f;
}
.cd-horizontal-timeline .events a.selected {
  pointer-events: none;
}
.cd-horizontal-timeline .events a.selected::after {
  background-color: #7b9d6f;
  border-color: #7b9d6f;
}
.cd-horizontal-timeline .events a.older-event::after {
  border-color: #7b9d6f;
}
@media only screen and (min-width: 1100px) {
  .cd-horizontal-timeline {
    margin: 0em auto;
  }
  .cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: "desktop";
  }
}

.cd-timeline-navigation a {
  /* these are the left/right arrows to navigate the timeline */
  position: absolute;
  z-index: 1;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  /* replace text with an icon */
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
.cd-timeline-navigation a::after {
  /* arrow icon */
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url("../assets/css/cd-arrow.svg") no-repeat 0 0;
}
.cd-timeline-navigation a.prev {
  left: 0;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation a.next {
  right: 0;
}
.no-touch .cd-timeline-navigation a:hover {
  border-color: #7b9d6f;
}
.cd-timeline-navigation a.inactive {
  cursor: not-allowed;
}
.cd-timeline-navigation a.inactive::after {
  background-position: 0 -16px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
  border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
  position: relative;
  width: 100%;
  margin: 2em 0;
  overflow: hidden;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  transition: height 0.4s;
}
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  padding: 0 5%;
  opacity: 0;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right,
.cd-horizontal-timeline .events-content li.leave-right {
  -webkit-animation-name: cd-enter-right;
  -moz-animation-name: cd-enter-right;
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left,
.cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-name: cd-enter-left;
  -moz-animation-name: cd-enter-left;
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right,
.cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * {
  max-width: 800px;
  margin: 0 auto;
}
.cd-horizontal-timeline .events-content h2 {
  font-weight: bold;
  font-size: 2.6rem;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  line-height: 1.2;
}
.cd-horizontal-timeline .events-content em {
  display: block;
  font-style: italic;
  margin: 10px auto;
}
.cd-horizontal-timeline .events-content em::before {
  content: "- ";
}
.cd-horizontal-timeline .events-content p {
  font-size: 1rem;
  color: #959595;
}
.cd-horizontal-timeline .events-content em,
.cd-horizontal-timeline .events-content p {
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .cd-horizontal-timeline .events-content h2 {
    font-size: 3rem;
  }
  .cd-horizontal-timeline .events-content p {
    font-size: 2.5rem;
  }
}

@-webkit-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
</style>
<script>
// eslint-disable-next-line eqeqeq
import $ from 'jquery'
import sideBar from './test.vue'

export default {
  data () {
    return {
      // pos: 0
    }
  },
  components: {
    sideBar
  },
  methods: {
    // f5 () {
    //   // this.$router.go(0)
    // }
  },
  created: function () {
    // window.location.reload()
    // this.$router.go(0)
  },
  mounted: function () {
    if (location.href.indexOf('#reloaded') === -1) {
      location.href = location.href + '#reloaded'
      location.reload()
    }
  }
}
$(function () {
  var timelines = $('.cd-horizontal-timeline')
  var eventsMinDistance = 60;

  (timelines.length > 0) && initTimeline(timelines)

  function initTimeline (timelines) {
    timelines.each(function () {
      var timeline = $(this)
      var timelineComponents = {}
      // cache timeline components
      timelineComponents.timelineWrapper = timeline.find('.events-wrapper')
      timelineComponents.eventsWrapper = timelineComponents.timelineWrapper.children('.events')
      timelineComponents.fillingLine = timelineComponents.eventsWrapper.children('.filling-line')
      timelineComponents.timelineEvents = timelineComponents.eventsWrapper.find('a')
      timelineComponents.timelineDates = parseDate(timelineComponents.timelineEvents)
      timelineComponents.eventsMinLapse = minLapse(timelineComponents.timelineDates)
      timelineComponents.timelineNavigation = timeline.find('.cd-timeline-navigation')
      timelineComponents.eventsContent = timeline.children('.events-content')

      // assign a left postion to the single events along the timeline
      setDatePosition(timelineComponents, eventsMinDistance)
      // assign a width to the timeline
      var timelineTotWidth = setTimelineWidth(timelineComponents, eventsMinDistance)
      // the timeline has been initialize - show it
      timeline.addClass('loaded')

      // detect click on the next arrow
      timelineComponents.timelineNavigation.on('click', '.next', function (event) {
        event.preventDefault()
        updateSlide(timelineComponents, timelineTotWidth, 'next')
      })
      // detect click on the prev arrow
      timelineComponents.timelineNavigation.on('click', '.prev', function (event) {
        event.preventDefault()
        updateSlide(timelineComponents, timelineTotWidth, 'prev')
      })
      // detect click on the a single event - show new event content
      timelineComponents.eventsWrapper.on('click', 'a', function (event) {
        event.preventDefault()
        // console.log($(this)[0].attributes)
        var newstr = $(this)[0].attributes['data-date'].value
        var newyear = newstr.substring(6, newstr.length)
        // console.log(newyear)
        // var str=timelineComponents.timelineEvents
        // console.log(timelineComponents.timelineEvents)
        // console.log(year)
        var arr = timelineComponents.timelineEvents
        let i = 0
        // console.log(arr)
        for (; i < arr.length; i++) {
          if (arr[i].attributes.class.value.indexOf('selected') >= 0) {
            break
          }
        }
        // console.log(arr[i].attributes[2].value)
        // console.log(i)
        var str = arr[i].attributes['data-date'].value
        var year = str.substring(6, str.length)
        if (newyear < year) {
          // eslint-disable-next-line no-redeclare
          var str = $('#container')[0].style.backgroundPositionX
          if (str === '') {
            $('#container')[0].style.backgroundPositionX = '-100vw'
          } else {
            var s1 = str.substring(0, str.length - 2)
            let num = Number(s1)
            num = num - 100
            $('#container')[0].style.backgroundPositionX = num + 'vw'
            // console.log()
          }
        } else if (newyear > year) {
          // eslint-disable-next-line no-redeclare
          var str = $('#container')[0].style.backgroundPositionX
          if (str === '') {
            $('#container')[0].style.backgroundPositionX = '100vw'
          } else {
            // eslint-disable-next-line no-redeclare
            var s1 = str.substring(0, str.length - 2)
            let num = Number(s1)
            num = num + 100
            $('#container')[0].style.backgroundPositionX = num + 'vw'
            // console.log()
          }
        }
        timelineComponents.timelineEvents.removeClass('selected')
        $(this).addClass('selected')
        updateOlderEvents($(this))
        updateFilling($(this), timelineComponents.fillingLine, timelineTotWidth)
        updateVisibleContent($(this), timelineComponents.eventsContent)
      })

      // on swipe, show next/prev event content
      timelineComponents.eventsContent.on('swipeleft', function () {
        var mq = checkMQ();
        // eslint-disable-next-line eqeqeq
        (mq == 'mobile') && showNewContent(timelineComponents, timelineTotWidth, 'next')
      })
      timelineComponents.eventsContent.on('swiperight', function () {
        var mq = checkMQ();
        // eslint-disable-next-line eqeqeq
        (mq == 'mobile') && showNewContent(timelineComponents, timelineTotWidth, 'prev')
      })
      // timelineComponents.eventsWrapper.on('click', 'a.btn', function (event) {
      //   console.log('next')
      //   showNewContent(timelineComponents, timelineTotWidth, 'next')
      // })
      // keyboard navigation
      $('#btnn').on('click', function () {
        // console.log('next')
        // this.pos = this.pos - 100
        // console.log(this.pos)
        // $('#container')
        var str = $('#container')[0].style.backgroundPositionX
        if (str === '') {
          $('#container')[0].style.backgroundPositionX = '100vw'
        } else {
          var s1 = str.substring(0, str.length - 2)
          let num = Number(s1)
          num = num + 100
          $('#container')[0].style.backgroundPositionX = num + 'vw'
          // console.log()
        }
        // console.log($('#container')[0].style.backgroundPositionX)
        showNewContent(timelineComponents, timelineTotWidth, 'next')
      })
      $('#btnl').on('click', function () {
        // console.log('next')
        var str = $('#container')[0].style.backgroundPositionX
        if (str === '') {
          $('#container')[0].style.backgroundPositionX = '-100vw'
        } else {
          var s1 = str.substring(0, str.length - 2)
          let num = Number(s1)
          num = num - 100
          $('#container')[0].style.backgroundPositionX = num + 'vw'
          // console.log()
        }
        showNewContent(timelineComponents, timelineTotWidth, 'prev')
      })
      $(document).keyup(function (event) {
        // eslint-disable-next-line eqeqeq
        if (event.which == '37' && elementInViewport(timeline.get(0))) {
          var str = $('#container')[0].style.backgroundPositionX
          if (str === '') {
            $('#container')[0].style.backgroundPositionX = '-100vw'
          } else {
            var s1 = str.substring(0, str.length - 2)
            let num = Number(s1)
            num = num - 100
            $('#container')[0].style.backgroundPositionX = num + 'vw'
            // console.log()
          }
          showNewContent(timelineComponents, timelineTotWidth, 'prev')
          // eslint-disable-next-line eqeqeq
        } else if (event.which == '39' && elementInViewport(timeline.get(0))) {
          // eslint-disable-next-line no-redeclare
          var str = $('#container')[0].style.backgroundPositionX
          if (str === '') {
            $('#container')[0].style.backgroundPositionX = '100vw'
          } else {
            // eslint-disable-next-line no-redeclare
            var s1 = str.substring(0, str.length - 2)
            let num = Number(s1)
            num = num + 100
            $('#container')[0].style.backgroundPositionX = num + 'vw'
            // console.log()
          }
          showNewContent(timelineComponents, timelineTotWidth, 'next')
        }
      })
    })
  }
  function updateSlide (timelineComponents, timelineTotWidth, string) {
    // retrieve translateX value of timelineComponents['eventsWrapper']
    var translateValue = getTranslateValue(timelineComponents.eventsWrapper)
    var wrapperWidth = Number(timelineComponents.timelineWrapper.css('width').replace('px', ''));
    // translate the timeline to the left('next')/right('prev')
    // eslint-disable-next-line eqeqeq
    (string == 'next')
      ? translateTimeline(timelineComponents, translateValue - wrapperWidth + eventsMinDistance, wrapperWidth - timelineTotWidth)
      : translateTimeline(timelineComponents, translateValue + wrapperWidth - eventsMinDistance)
  }

  function showNewContent (timelineComponents, timelineTotWidth, string) {
    // go from one event to the next/previous one
    var visibleContent = timelineComponents.eventsContent.find('.selected')
    // eslint-disable-next-line eqeqeq
    var newContent = (string == 'next') ? visibleContent.next() : visibleContent.prev()

    if (newContent.length > 0) { // if there's a next/prev event - show it
      var selectedDate = timelineComponents.eventsWrapper.find('.selected')
      // eslint-disable-next-line eqeqeq
      var newEvent = (string == 'next') ? selectedDate.parent('li').next('li').children('a') : selectedDate.parent('li').prev('li').children('a')

      updateFilling(newEvent, timelineComponents.fillingLine, timelineTotWidth)
      updateVisibleContent(newEvent, timelineComponents.eventsContent)
      newEvent.addClass('selected')
      selectedDate.removeClass('selected')
      updateOlderEvents(newEvent)
      updateTimelinePosition(string, newEvent, timelineComponents, timelineTotWidth)
    }
  }
  // function next (timelineComponents, timelineTotWidth) {
  //   showNewContent(timelineComponents, timelineTotWidth, 'next')
  // }
  // $('#btn').on('click', function () {
  //   console.log('next')
  //   showNewContent(timelineComponents, timelineTotWidth, 'next')
  // })
  function updateTimelinePosition (string, event, timelineComponents, timelineTotWidth) {
    // translate timeline to the left/right according to the position of the selected event
    var eventStyle = window.getComputedStyle(event.get(0), null)
    var eventLeft = Number(eventStyle.getPropertyValue('left').replace('px', ''))
    var timelineWidth = Number(timelineComponents.timelineWrapper.css('width').replace('px', ''))
    timelineTotWidth = Number(timelineComponents.eventsWrapper.css('width').replace('px', ''))
    var timelineTranslate = getTranslateValue(timelineComponents.eventsWrapper)

    // eslint-disable-next-line eqeqeq
    if ((string == 'next' && eventLeft > timelineWidth - timelineTranslate) || (string == 'prev' && eventLeft < -timelineTranslate)) {
      translateTimeline(timelineComponents, -eventLeft + timelineWidth / 2, timelineWidth - timelineTotWidth)
    }
  }

  function translateTimeline (timelineComponents, value, totWidth) {
    var eventsWrapper = timelineComponents.eventsWrapper.get(0)
    value = (value > 0) ? 0 : value // only negative translate value
    value = (!(typeof totWidth === 'undefined') && value < totWidth) ? totWidth : value // do not translate more than timeline width
    setTransformValue(eventsWrapper, 'translateX', value + 'px');
    // update navigation arrows visibility
    // eslint-disable-next-line eqeqeq
    (value == 0) ? timelineComponents.timelineNavigation.find('.prev').addClass('inactive') : timelineComponents.timelineNavigation.find('.prev').removeClass('inactive');
    // eslint-disable-next-line eqeqeq
    (value == totWidth) ? timelineComponents.timelineNavigation.find('.next').addClass('inactive') : timelineComponents.timelineNavigation.find('.next').removeClass('inactive')
  }

  function updateFilling (selectedEvent, filling, totWidth) {
    // change .filling-line length according to the selected event
    var eventStyle = window.getComputedStyle(selectedEvent.get(0), null)
    var eventLeft = eventStyle.getPropertyValue('left')
    var eventWidth = eventStyle.getPropertyValue('width')
    eventLeft = Number(eventLeft.replace('px', '')) + Number(eventWidth.replace('px', '')) / 2
    var scaleValue = eventLeft / totWidth
    setTransformValue(filling.get(0), 'scaleX', scaleValue)
  }

  function setDatePosition (timelineComponents, min) {
    for (let i = 0; i < timelineComponents.timelineDates.length; i++) {
      var distance = daydiff(timelineComponents.timelineDates[0], timelineComponents.timelineDates[i])
      var distanceNorm = Math.round(distance / timelineComponents.eventsMinLapse) + 2
      timelineComponents.timelineEvents.eq(i).css('left', distanceNorm * min + 'px')
    }
  }

  function setTimelineWidth (timelineComponents, width) {
    var timeSpan = daydiff(timelineComponents.timelineDates[0], timelineComponents.timelineDates[timelineComponents.timelineDates.length - 1])
    var timeSpanNorm = timeSpan / timelineComponents.eventsMinLapse
    timeSpanNorm = Math.round(timeSpanNorm) + 4
    var totalWidth = timeSpanNorm * width
    timelineComponents.eventsWrapper.css('width', totalWidth + 'px')
    updateFilling(timelineComponents.timelineEvents.eq(0), timelineComponents.fillingLine, totalWidth)

    return totalWidth
  }

  function updateVisibleContent (event, eventsContent) {
    var eventDate = event.data('date')
    var visibleContent = eventsContent.find('.selected')
    var selectedContent = eventsContent.find('[data-date="' + eventDate + '"]')
    var selectedContentHeight = selectedContent.height()

    if (selectedContent.index() > visibleContent.index()) {
      var classEnetering = 'selected enter-right'
      var classLeaving = 'leave-left'
    } else {
      classEnetering = 'selected enter-left'
      classLeaving = 'leave-right'
    }

    selectedContent.attr('class', classEnetering)
    visibleContent.attr('class', classLeaving).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function () {
      visibleContent.removeClass('leave-right leave-left')
      selectedContent.removeClass('enter-left enter-right')
    })
    eventsContent.css('height', selectedContentHeight + 'px')
  }

  function updateOlderEvents (event) {
    event.parent('li').prevAll('li').children('a').addClass('older-event').end().end().nextAll('li').children('a').removeClass('older-event')
  }

  function getTranslateValue (timeline) {
    var timelineStyle = window.getComputedStyle(timeline.get(0), null)
    var timelineTranslate = timelineStyle.getPropertyValue('-webkit-transform') ||
      timelineStyle.getPropertyValue('-moz-transform') ||
      timelineStyle.getPropertyValue('-ms-transform') ||
      timelineStyle.getPropertyValue('-o-transform') ||
      timelineStyle.getPropertyValue('transform')

    if (timelineTranslate.indexOf('(') >= 0) {
      timelineTranslate = timelineTranslate.split('(')[1]
      timelineTranslate = timelineTranslate.split(')')[0]
      timelineTranslate = timelineTranslate.split(',')
      var translateValue = timelineTranslate[4]
    } else {
      translateValue = 0
    }

    return Number(translateValue)
  }

  function setTransformValue (element, property, value) {
    element.style['-webkit-transform'] = property + '(' + value + ')'
    element.style['-moz-transform'] = property + '(' + value + ')'
    element.style['-ms-transform'] = property + '(' + value + ')'
    element.style['-o-transform'] = property + '(' + value + ')'
    element.style.transform = property + '(' + value + ')'
  }

  // based on http://stackoverflow.com/questions/542938/how-do-i-get-the-number-of-days-between-two-dates-in-javascript
  function parseDate (events) {
    var dateArrays = []
    events.each(function () {
      var dateComp = $(this).data('date').split('/')
      var newDate = new Date(dateComp[2], dateComp[1] - 1, dateComp[0])
      dateArrays.push(newDate)
    })
    return dateArrays
  }

  // function parseDate2 (events) {
  //   var dateArrays = []
  //   events.each(function () {
  //     var singleDate = $(this)
  //     var dateComp = singleDate.data('date').split('T')
  //     if (dateComp.length > 1) { // both DD/MM/YEAR and time are provided
  //       var dayComp = dateComp[0].split('/')
  //       var timeComp = dateComp[1].split(':')
  //     } else if (dateComp[0].indexOf(':') >= 0) { // only time is provide
  //       dayComp = ['2000', '0', '0']
  //       timeComp = dateComp[0].split(':')
  //     } else { // only DD/MM/YEAR
  //       dayComp = dateComp[0].split('/')
  //       timeComp = ['0', '0']
  //     }
  //     var newDate = new Date(dayComp[2], dayComp[1] - 1, dayComp[0], timeComp[0], timeComp[1])
  //     dateArrays.push(newDate)
  //   })
  //   return dateArrays
  // }

  function daydiff (first, second) {
    return Math.round((second - first))
  }

  function minLapse (dates) {
    // determine the minimum distance among events
    var dateDistances = []
    for (let i = 1; i < dates.length; i++) {
      var distance = daydiff(dates[i - 1], dates[i])
      dateDistances.push(distance)
    }
    return Math.min.apply(null, dateDistances)
  }

  /*
      How to tell if a DOM element is visible in the current viewport?
      http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
    */
  function elementInViewport (el) {
    var top = el.offsetTop
    var left = el.offsetLeft
    var width = el.offsetWidth
    var height = el.offsetHeight

    while (el.offsetParent) {
      el = el.offsetParent
      top += el.offsetTop
      left += el.offsetLeft
    }

    return (
      top < (window.pageYOffset + window.innerHeight) &&
      left < (window.pageXOffset + window.innerWidth) &&
      (top + height) > window.pageYOffset &&
      (left + width) > window.pageXOffset
    )
  }

  function checkMQ () {
    // check if mobile or desktop device
    return window.getComputedStyle(document.querySelector('.cd-horizontal-timeline'), '::before').getPropertyValue('content').replace(/'/g, '').replace(/"/g, '')
  }
})
</script>
